<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>  
			
			ul>li{
				display: inline-block;
				list-style: none;
				margin: 0 20px;
				cursor: pointer;
				padding-bottom: 10px;
			} 
			
			ul>li:hover{
				color: #40AAFF;
			}
			
			ul>li.active{
				color: #40AAFF;
				border-bottom: solid 2px  #40AAFF;
			}
			
			
		</style>
	</head>
	<body>

		<div id="app">
			
			<Tabs :titles="outerTitles1" @change="changeTitles1"></Tabs>
			<div v-html="content1[title1Selected]">  内容</div>
			
			
			
			<Tabs :titles="outerTitles2"></Tabs>
			<div></div>
					
		</div>
		
		
		<template id="tabTemplate">
			<ul>
				<!-- 原始的固定的写法 -->
				<!-- <li  class="active">用户管理</li>
				<li>配置管理</li>
				<li>角色管理</li>
				<li>定时任务补偿</li> -->
				
				<!-- 动态的根据数据 生成列表  class="active" -->
				<li  v-for="(title,index) in titles":class="{active:currentSelected==index}" @click="changeSelected(index)" >
				
					{{title}}
				
				
				</li>
				
			</ul>
		</template>
		
		<script>
			
			let Tabs = {
				template:'#tabTemplate',
				props:[
					// {
					// 	name:'titles',
					// 	type:Array,
					// 	default:[]
					// },
					'titles'
				],
				data(){
					return {
						//当前选中的选项卡
						currentSelected:0,
						// titles:[
						// 	'用户管理','配置管理','角色管理','定时任务补偿'
						// ]
					}
				},
				methods:{
					changeSelected(index){
						this.currentSelected = index; 
						this.$emit("change",this.currentSelected);//发生了一次 change事件，通知外部的组件 
					}
				}
			}
			
			
			
			//只有跟 Vue对象的date 声明时 JSON对象
			let vm = new Vue({
				el: '#app',
				
				data: {
					title1Selected:0,
					outerTitles1:[
						'用户管理','配置管理','角色管理','定时任务补偿'
					],
					content1:[
						'<h3>用户的列表</h3>',
						'<h3>配置的列表</h3>',
						'<h3>角色的列表</h3>',
						'<h3>定时任务的列表</h3>'
					],
					
					outerTitles2:[
						'系统管理','门诊医生','护士站','医技医生'
					]
				},
				// components:{
				// 	Tabs:Tabs
				// },
				//上面的省略的写法
				components:{
					Tabs
				},
				methods:{
					changeTitles1(index){
						this.title1Selected = index;
						
					}
				}
				

			});
		</script>

	</body>
</html>
